<template>
  <div class="HotSale">
    <div class="sale-list">
      <div class="sale-box">
        <div class="sale-img">
          <img src="http://127.0.0.1/img/brands/sale-01.png" alt />
        </div>
        <div class="sale-title">日本进口宝丽百合花香玫瑰</div>
        <div class="sale-include">包邮</div>
        <div class="price">￥166</div>
      </div>
      <div class="sale-box">
        <div class="sale-img">
          <img src="http://127.0.0.1/img/brands/sale-01.png" alt />
        </div>
        <div class="sale-title">日本进口宝丽百合花香玫瑰</div>
        <div class="sale-include">包邮</div>
        <div class="price">￥166</div>
      </div>
      <div class="sale-box">
        <div class="sale-img">
          <img src="http://127.0.0.1/img/brands/sale-01.png" alt />
        </div>
        <div class="sale-title">日本进口宝丽百合花香玫瑰</div>
        <div class="sale-include">包邮</div>
        <div class="price">￥166</div>
      </div>
      <div class="sale-box">
        <div class="sale-img">
          <img src="http://127.0.0.1/img/brands/sale-01.png" alt />
        </div>
        <div class="sale-title">日本进口宝丽百合花香玫瑰</div>
        <div class="sale-include">包邮</div>
        <div class="price">￥166</div>
      </div>
    </div>
  </div>
</template>

<style lang="scss">
.HotSale {
  background: #f2f2f2;
  padding: 0.266667rem;
  .sale-list {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    .sale-box {
      width: 4.6rem;
      height: 5.666667rem;
      text-align: left;
      background: #ffffff;
      border-radius: 0.266667rem;
      overflow: hidden;
      margin-top: 0.266667rem;
      .sale-img {
        width: 100%;
        height: 3.866667rem;
        border-bottom: 0.026667rem solid #f2f2f2;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .sale-include {
        font-size: 0.32rem;
        color: #202020;
        line-height: 0.533333rem;
        padding: 0 0.133333rem;
      }
      .sale-title {
        font-size: 0.346667rem;
        color: #202020;
        line-height: 0.466667rem;
        padding: 0 0.133333rem;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
      }
      .price {
        font-size: 0.4rem;
        color: #f93838;
        padding: 0 0.133333rem;
        line-height: 0.666667rem;
      }
    }
  }
}
</style>